<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术社区</title>
    <!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>

    <style>
        .el-carousel__item img {
            width: 100%;
            height: 100%;
        }

        .el-avatar {
            cursor: pointer;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="4" style="display: flex; flex-direction: row; align-items: center;">
                        <img src="./static/image/logo.png" style="height: 60px; width: 60px;" />
                        <h2>技术社区</h2>
                    </el-col>
                    <el-col :span="8">
                        <el-menu default-active="activeIndex" mode="horizontal" style="border-bottom: none !important">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-menu-item index="2">文章</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <el-menu-item index="4">商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="8" style="height: 60px; line-height: 60px;">
                        <el-input placeholder="请输入内容"></el-input>
                    </el-col>
                    <el-col :span="4"
                        style="display: flex; justify-content: flex-end; align-items: center; height: 60px;">
                        <div style="display: flex; gap: 20px;">
                            <div v-if="!isLoggedIn">
                                <a href="login.html"><el-link type="primary">登录</el-link></a>
                                <a href="register.html"><el-link type="primary">注册</el-link></a>
                            </div>
                            <div v-else style="display: flex; align-items: center; gap: 10px;">
                                <el-avatar :src="user.avatar"></el-avatar>
                                <el-dropdown>
                                    <span class="el-dropdown-link" @click="goToProfile">
                                        {{ user.nickname }}<i class="el-icon-arrow-down el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click="goToProfile">个人中心</el-dropdown-item>
                                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-carousel height="420px">
                    <el-carousel-item>
                        <img src="./static/image/1.png">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="./static/image/2.png">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="./static/image/3.png">
                    </el-carousel-item>
                </el-carousel>
            </el-main>
            <el-main>
                <el-row>
                    <el-col :span="8">
                        <el-card>
                            <h3>热门文章</h3>
                            <el-list>
                                <el-list-item v-for="article in articles" :key="article.id">
                                    <p><el-link :href="article.url">{{ article.title }}</el-link></p>
                                </el-list-item>
                            </el-list>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card>
                            <h3>热门课程</h3>
                            <el-list>
                                <el-list-item v-for="course in courses" :key="course.id">
                                    <p><el-link :href="course.url">{{ course.title }}</el-link></p>
                                </el-list-item>
                            </el-list>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card>
                            <h3>热门商品</h3>
                            <el-carousel :interval="4000" type="card" height="200px">
                                <el-carousel-item v-for="product in products" :key="product.id">
                                    <el-link :href="product.url">
                                        <el-image :src="'./static/image/' + product.image" fit="contain"></el-image>
                                        <div>{{ product.title }}</div>
                                    </el-link>
                                </el-carousel-item>
                            </el-carousel>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
            <el-footer>
                <el-row>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <img src="./static/image/logo.png" style="height: 60px; width: 60px;" />
                            <h2>技术社区</h2>
                            <p>致力于构建一个专业的IT技术交流社区</p>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <el-link>首页</el-link>
                            <el-link>文章</el-link>
                            <el-link>课程</el-link>
                            <el-link>商城</el-link>
                        </div>
                        <div>
                            <el-link>关于我们</el-link>
                            <el-link>使用手册</el-link>
                            <el-link>隐私条款</el-link>
                            <el-link>建议反馈</el-link>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <h2>联系我们</h2>
                            <p>电话：123456</p>
                            <p>邮箱：123456</p>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="24" style="background-color: deepskyblue;">
                        <p style="text-align: center;">软件开发工作室版权所有</p>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>

    <script>
        var App = {
            data() {
                return {
                    isLoggedIn: false,
                    user: {
                        nickname: '张三',
                        avatar: './static/image/tou.png'
                    },
                    activeIndex: '1',
                    articles: [
                        { id: 1, title: "Vue 3.0 新特性使用攻略", url: "article1.html" },
                        { id: 2, title: "Vue 脚手架使用详解", url: "article2.html" },
                        { id: 3, title: "Element Plus 组件库使用指南", url: "article3.html" }
                    ],
                    courses: [
                        { id: 1, title: "零基础学 JavaScript", url: "course1.html" },
                        { id: 2, title: "Vue 3.0 从入门到精通", url: "course2.html" },
                        { id: 3, title: "Element Plus 组件库实战", url: "course3.html" }
                    ],
                    products: [
                        { id: 1, title: "商品1", url: "product1.html", image: "tu1.png" },
                        { id: 2, title: "商品2", url: "product2.html", image: "tu2.png" },
                        { id: 3, title: "商品3", url: "product3.html", image: "tu3.png" }
                    ]
                };
            },
            created() {
                this.checkLoginStatus();
            },
            methods: {
                checkLoginStatus() {
                    const userInfo = localStorage.getItem('userInfo');
                    if (userInfo) {
                        this.isLoggedIn = true;
                        this.user = JSON.parse(userInfo);
                    } else {
                        this.isLoggedIn = false;
                    }
                },
                goToProfile() {
                    window.location.href = 'person.html';
                },
                logout() {
                    localStorage.removeItem('userInfo');
                    this.isLoggedIn = false;
                    this.user = { nickname: '', avatar: '' };
                    window.location.href = 'login.html';
                }
            }
        };
        Vue.createApp(App).use(ElementPlus).mount("#app");
    </script>
</body>

</html>